import React, { useEffect, useRef, useState } from "react";
import { Tabs} from "antd";
import type { TabsProps } from 'antd';
import { getRanking } from "../../api";
import './index.scss'
import _ from 'lodash'
import { LikeTwoTone , CrownTwoTone} from '@ant-design/icons';

const tabs: TabsProps['items'] = [
{
    key: '1',
    label: '博主榜'
},
{
    key: '2',
    label: '答主榜',
},
{
    key: '3',
    label: '全能榜',
},
];
const items: TabsProps['items'] = [
  {
    key: '1',
    label: '本月'
  },
  {
    key: '2',
    label: '季度',
  },
  {
    key: '3',
    label: '年度',
  },
  {
    key: '4',
    label: '总榜',
  },
  {
    key: '5',
    label: '一天之内'
  }
];

interface listType {
  firstId:string,
  secondId:string,
  number:number,
  url:string,
  name:string
}

const Chart:React.FC = ()=> {
    const [firstId , setFirstId] = useState('1')
    const [secondId , setSecondId] = useState('1')
    const [list , setList] = useState<listType[]>([])
    useEffect(()=> {
        setList([])
        const getList =async()=> {
        const ID = {
            firstId,
            secondId
        }
        const res = await getRanking(ID)
        const arr = _.orderBy(res as unknown as listType[], ['number'], ['desc']).slice(0,5)
        setList(arr)
    }
    getList()
    },[firstId,secondId])
   
    

    return (
        <div className="chart">
            <Tabs
                defaultActiveKey="1" 
                items={tabs} 
                style={{width:'100%', fontSize:'12px', marginBottom:'-10px'}} 
                tabBarGutter={20}
                centered
                onChange={(e)=>setFirstId(e)}
              />
              <Tabs 
                defaultActiveKey="1" 
                items={items} 
                style={{width:'100%', fontSize:'12px' }} 
                tabBarGutter={20} 
                centered
                onChange={(e)=>setSecondId(e)}
              />
              <div className="list">
                <ul>
                    {list.map((item , index)=>
                        <li key={`${firstId}-${secondId}-${index}`}>
                            <div className="left">
                                <h4>{index <=2 ? <CrownTwoTone/> : index + 1}</h4>
                                <img src={item.url} alt="" />
                                <div style={{height:'100%', display:'flex' , alignItems:'center', marginLeft:'10px'}}>{item.name}</div>
                            </div>
                            <div className="rightspan">
                                <span> <LikeTwoTone style={{marginRight:'5px'}}/> </span><span>{item.number}</span>
                            </div>

                        </li>
                    )}
                </ul>
              </div>
        </div>
    )
}
export default Chart